 <!-- 我的参与记录 -->
<template>
  <view :class="isIpx ? 'fix-iphonex-info' : ''">
    <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <view class="top_search">
      <view class="search_read_only">
        <view class="search_content">
          <i class="iconfont icon-fangdajing"></i>
          <input type="text" class="search_input u-color-1a" style="position: relative;z-index: 2;"
            placeholder-class="phcolor" placeholder="请输入城市/店名" :value="defaultKeyword" @focus="getfocus"
            @input="inputValue" confirm-type="search" @confirm="searchKeyWord" />
          <view class="search_right">
            <view v-if="defaultKeyword.length > 0 && showSearchClear"  @click="bindClose"
              class="macallan-icon mcl-guanbi1"></view>
            <view class="right-Item" @click="searchKeyWord" :data-search="search">
              <text class=" iconfont icon-jiantouxiangzuo"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="is_searchEmpty && searchError">
      <placeholder :is_empty.sync="is_searchEmpty" :messageSeach="defaultKeyword" :showmessageSeach.sync="showmessageSeach">
      </placeholder>
    </view>
    <view class="listBox" v-if="!searchError">
    <block v-for="(item, index) in listData" :key="index">
      <view class="item">
        <view class="img">
       <image :src="item.storeImg"  mode="widthFix"></image>
        </view>
        <view class="text">
          <view class="goodsTitle">
             {{item.storeName}}
          </view>
          <view class="address">
           {{item.storeAddress}}
          </view>
          <view class="time" v-if="item.storeBusTime">
           <label class="iconTime macallan-icon mcl-time"></label>
           {{item.storeBusTime}}
          </view>
          <view class="phone"v-if="item.storePhone">
           <label class="iconPhone macallan-icon mcl-phone"></label>
           <text :class="item.storePhone ? 'line' : ''" @click="call(item)">{{item.storePhone ? item.storePhone : '暂无'}}</text>
          </view>
        </view>
      </view>
    </block>
    <loadMore :show.sync="showMoreLoading"  message="加载中"></loadMore>
     <view v-if="hasMore > 0" class="hasMore">已到页面底部</view>
    </view>
    <!--暂无数据显示-->
    <view v-if="is_empty && !searchError">
   <placeholder :is_empty.sync="is_empty" :isStore.sync="isStore" message="当前商品暂无购买渠道门店"></placeholder>
   </view>
   <!--加载更多时动画-->
    <loading :showLoaded.sync="showLoaded"></loading>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>

<script>
  import api from '@/api/api';
  import util from '@/utils/util';
  import NavBar from '../../components/common/navbar';
  import Loading from '../../components/common/loading';
  import Placeholder from '@/components/common/placeholder';
  import LoadMore from '@/components/common/loadMore';
  import {
    SYSTEM_INFO,
    USER_INFO,
    USER_SPECICAL_INFO,
    CUSTOMER_INFO,
    MERCHANT_INFO,
    LOWER_WX_VERSION
  } from '@/utils/constant';
  export default {
   components: {
     navBar: NavBar,
     loading: Loading,
     placeholder: Placeholder,
     loadMore: LoadMore,
   },
  data() {
   return {
     navbarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      navbarTitle: '门店地址',
      hideSearch: true,
      hideHome: false,
     },
     showLoaded: true,
     isShowCustomNavBar: true,
     listData:[],
     is_searchEmpty: false,
     is_empty: false,
     isIpx: false,
     itemId:1,
     storeField:"",
     // 搜索
     showSearchClear: false,
     defaultKeyword: '',
     searchError: false,
     showmessageSeach: false,
     //当前页面
     currentPage: 1,
     //总页数
     pageTotal: 0,
     pageSize: 20,
     hasMore: 0,
     showMoreLoading:false,
     preventRepeatReuqest: false,
     isStore:true,
     nowPages:'',
  }
 },
 onLoad: async function(option) {
   let that = this;
   this.isIpx = getApp().globalData.isIpx;
   that.itemId = option.itemId;
   let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
   that.storeList(customerInfo.jwt);
   let pages = getCurrentPages();
   //当前页面
   var currPage = pages[pages.length - 1];
   this.nowPages = currPage.route;
 },
 onShow: async function() {
   let that = this;
   getApp().cl_tracker.track('mini_program_view', {
     path:  this.nowPages,
     pageName: '门店地址',
   })
 },
 methods: {
	 /**
	  * 展示弱提示
	  * @param {Object} msg 文案
	  */
	 handleShowTextToast(msg){
	 	try{
	 		this.$refs.toastPopup.showToast(msg);
	 	}catch(e){}
	 },
	 /**
	  * 若提示按钮点击回调
	  * @param {Object} data.type 类型：confirm确定，cancel取消
	  * @param {Object} data.callBackData 呼气弹窗时传入的数据
	  */
	 onToastPopupClick(data){},
   /**
    * 搜索
    */
   inputValue(e) {
     this.defaultKeyword = e.detail.value.replace(/\s*/g, '');
     if (this.defaultKeyword.length > 0) {
       this.showSearchClear = true;
     } else {
       this.showSearchClear = false;
     }

     if (e.detail.cursor == 0) {
       this.searchError = false;
       this.is_empty = false ;
       this.storeList();
     }
   },
   getfocus(e) {
     if (this.defaultKeyword.length > 0) {
       this.showSearchClear = true;
     } else {
       this.showSearchClear = false;
     }
   },
   bindClose() {
     if (this.defaultKeyword.length > 0) {
       this.defaultKeyword = '';
       this.showSearchClear = false;
       this.searchError = false;
       this.is_empty = false;
       this.storeList();
     }
   },
   searchKeyWord: function(e) {
     var searchValue = this.defaultKeyword
     this.categoryName = searchValue;
     if (searchValue === '') {
       this.handleShowTextToast('请输入搜索词');
       return;
     } else {
       this.is_searchEmpty = false;
       this.is_empty = false;
       this.showLoading = false;
       this.showSearchClear = false;
       this.defaultKeyword = searchValue;
       this.storeList();
     }
   },
   call(item){
   			let phone = item.storePhone
        // GTR门店列表-点击电话埋点
        let clTrackPrams = {
          'c_store_name': item.storeName,
          'c_store_address': item.storeAddress,
          'c_store_phone': item.storePhone,
        }
        getApp().commonClTrack('c_ebmp_gtr_phone_click', clTrackPrams)
   			  uni.makePhoneCall({
   				phoneNumber:phone,
   				success:function(res){
   		
   				},
   			})
  },
  //加载更多
  onReachBottom() {
    let that = this;
    that.showMoreLoading = true;
    //判断总页数是否大于翻页数
    if (that.pageTotal > that.currentPage) {
      //防止重复加载
      if (that.preventRepeatReuqest) {
        return true;
      }
      that.preventRepeatReuqest = true;
      that.currentPage++;
      this.storeList()
      that.preventRepeatReuqest = false;
    } else {
      that.showMoreLoading = false;
    }
  },
  storeList: async function(jwt) {
  let that = this;
  let customerInfo = uni.getStorageSync(CUSTOMER_INFO) || jwt;
  let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
  const parmas = {
    merchantId: merchantInfo.cloudMerchantId,
    page: that.currentPage,
    size:  that.pageSize,
    // itemId: that.itemId ? that.itemId : '',
    // storeField: this.defaultKeyword ? this.defaultKeyword : '',
  };
  if (that.itemId !== '') {
    parmas.itemId = that.itemId || '';
  }
  if(this.defaultKeyword !== ''){
    parmas.storeField = this.defaultKeyword;
    parmas.page = 1;
    parmas.size= 50;
  }
  const json = await api.storeAddressList({
    query: parmas
  });
  if (json.code == 1000) {
    that.listData = [...that.listData, ...json.data.content];
    if(!!parmas.storeField){
      // GTR门店列表-搜索门店埋点
      let clTrackPrams = {
        'c_search_keyword': parmas.storeField,
      }
      getApp().commonClTrack('c_ebmp_gtr_search_store', clTrackPrams)
    }
    if (that.currentPage == 1 || !!parmas.storeField) {
      that.listData = json.data.content
    }
     that.pageTotal = Math.ceil(json.data.totalElements / that.pageSize);
     // 判断是否显示已加载全部数据
     if (that.pageTotal == that.currentPage) {
       this.hasMore = 1;
     } else {
       this.hasMore = 0;
     }
    if (json.data.content.length == 0) {
      that.is_empty = true;
      that.showmessageSeach = true;
      // 搜索错误提示
      if (!!parmas.storeField) {
        that.searchError = true;
        that.is_searchEmpty = true;
         that.listData = json.data.content
      } else {
        that.searchError = false;
        that.is_searchEmpty = false;
      }
    }

     that.showLoaded = false;
     // that.listData = json.data.content;
     let systemInfo = uni.getStorageSync(SYSTEM_INFO);
     let isIos = systemInfo.system.indexOf('iOS')
   }else{
     this.handleShowTextToast(json.msg);
   }
  },
 }
}
</script>

<style lang="less">
  page{
    background-color: #f7f6f4;
  }
  .top_search{
     background: none;
  }
  .listBox{
    margin-top:24rpx;
    padding:0 24rpx;

    .item{
      margin-bottom:22rpx;
      padding:36rpx;
      background-color: #fff;
      display: flex;

      .img{
        margin-right:40rpx;

        image{
          width:180rpx;
          height:180rpx;
          display: block;
        }
      }
      .text{
        // align-content:space-between;
        // display: flex;
        // flex-wrap: wrap;

        .goodsTitle{
          color:#000;
          font-size:26rpx;
          margin-bottom: 12rpx;
          line-clamp: 2;
          overflow: hidden;
          white-space: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .time,.address,.phone{
          color:#4d4d4d;
          font-size:22rpx;
          margin-bottom: 12rpx;
          display: flex;
        }
        .iconTime{
          display: inline-block;
          margin: 4rpx 8rpx 0 0;
          font-size: 22rpx;

          image{
            width:100%;
            display: block;
          }
        }
        .iconPhone{
          display: inline-block;
          margin: 4rpx 8rpx 0 0;
          font-size: 22rpx;

          image{
            width:100%;
            display: block;
          }
        }
        .line{
          border-bottom: 1px solid #4d4d4d;
          // color: #862633;
        }
      }
    }
  }
  .hasMore {
    font-size: 12px;
    color: #444;
    background: #f7f5f4;
    width: 100%;
    text-align: center;
    padding-bottom: 48rpx;
    padding-top: 20rpx;
  }
  .bottomText{
    color:#828282;
    font-size:25rpx;
    text-align: center;
    padding:60rpx 0;
    letter-spacing:2rpx;

  }
  .fix-iphonex-info{
    padding-bottom: 30rpx;
  }
 .search_read_only {
    padding: 0;
    width: auto;
    margin: 24rpx;
    background: #fff;

  .search_content {
      width: 100%;
      border-radius: 0;
      padding: 0;
      background: none;
      border-bottom: 1px solid #e7e7e7;
      position: relative;
      height: 60rpx;
      .icon-fangdajing {
        color: #333333;
        font-size: 36rpx;
        margin-top: -1px;
        margin-left: 15rpx;
      }

      .search_input {
        margin: 0 10rpx;
      }

      .search_right {
        display: flex;
        align-items: center;
        justify-content: center;

        .mcl-guanbi1 {
          width: 70px;
          height: 30px;
          text-align: right;
          font-size: 30rpx;
          font-weight: 700;
          padding-right: 15px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        .right-Item {
          transform: rotate(180deg);
          width: 59rpx;
          height: 59rpx;
          border: 1.5px solid #000;
          background: #000;
          // border: 1.5px solid #996666;
          // background: #993333;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .icon-jiantouxiangzuo {
          color: #fff;
          font-size: 36rpx;
        }
      }

    }
  }
</style>
